import 'dart:io';

import 'package:flutter/material.dart';
import 'package:gold/model/order_model.dart';
import 'package:gold/widgets/http_image.dart';
import 'package:provider/provider.dart';
import 'package:gold/base/provider_scaffold.dart';
import 'package:gold/ui/my/order/appraise_viewmodel.dart';
import 'package:gold/utils/res.dart';
import 'package:gold/utils/xfg_color.dart';
import 'package:gold/utils/xfg_size.dart';
import 'package:gold/widgets/common_widgets.dart';
import 'package:gold/widgets/oval_image.dart';
import 'package:gold/widgets/xfg_text.dart';

/// @description: 评价
/// @author tangzhentao
/// @created at 13:26 2024/12/14

class AppraisePage extends StatelessWidget {
  /// 订单信息
  final int orderId;
  /// 商品ID
  final int productId;
  /// 订单信息
  final OrderDetailProduct product;

  const AppraisePage({super.key, required this.orderId, required this.productId, required this.product});

  @override
  Widget build(BuildContext context) {
    return ProviderScaffold<AppraiseViewmodel>(
      resizeToAvoidBottomInset: false,
      appBar: (_) => xfgAppbar(title: '发表评价'),
      model: AppraiseViewmodel(orderId, productId),
      builder: (ctx, appraise) => Padding(
        padding: EdgeInsets.all(XfgSize().size10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              decoration: white6Decoration,
              padding: EdgeInsets.all(XfgSize().size10),
              child: Column(
                children: [
                  /// 订单信息
                  SizedBox(
                    height: XfgSize().size50,
                    child: Row(
                      children: [
                        HttpImage(product.coverImage, size: Size.square(XfgSize().size50), radius: BorderRadius.circular(XfgSize().size2)),
                        SizedBox(width: XfgSize().size10),
                        Expanded(
                          child: Padding(
                            padding: EdgeInsets.only(top: XfgSize().size5, bottom: XfgSize().size3),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                XfgText(product.name?? '', fontSize: XfgSize().text14, color: XfgColor.text1, maxLines: 1, overflow: TextOverflow.ellipsis),
                                XfgText('价格：${product.price?? '--'}', fontSize: XfgSize().text14, color: XfgColor.text3)
                              ],
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                  SizedBox(height: XfgSize().size16),
                  /// 评价
                  Row(
                    children: [
                      XfgText('描述相符', fontSize: XfgSize().text16, color: XfgColor.text1D, bold: FontWeight.bold),
                      Expanded(
                        child: Container(
                          margin: EdgeInsets.only(left: XfgSize().size15),
                          child: Builder(builder: (ctx) {
                            final arValue = ctx.select<AppraiseViewmodel, int>((k) => k.appraise);
                            return Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: List.generate(5, (index) {
                                final select = (arValue - 1) >= index;
                                return GestureDetector(
                                onTap: () {
                                  appraise.appraise = index + 1;
                                },
                                child: Image.asset(select ? Res.imagesAppraiseGood:Res.imagesAppraiseBad, width: XfgSize().size21, height: XfgSize().size21),
                                );
                              }),
                            );
                          }),
                        )
                      ),
                      Container(
                        width: XfgSize().size60,
                        padding: EdgeInsets.only(left: XfgSize().size10),
                        alignment: Alignment.centerLeft,
                        child: XfgText('一般', fontSize: XfgSize().text16, color: XfgColor.text3, bold: FontWeight.bold),
                      )
                    ],
                  ),
                  Container(
                    margin: EdgeInsets.symmetric(vertical: XfgSize().size12),
                    alignment: Alignment.centerLeft,
                    child: Builder(builder: (con) {
                      final selectLabels = con.select<AppraiseViewmodel, String>((k) => k.selectLabels);
                      return Wrap(
                        spacing: XfgSize().size5, runSpacing: XfgSize().size5,
                        children: appraise.labels.map((label) {
                          final width = boundingTextSize(label, style: TextStyle(fontSize: XfgSize().text14)).width + XfgSize().size18;
                          final select = selectLabels.contains(label);
                          return GestureDetector(
                            onTap: () => appraise.changeSelectLabels(label),
                            child: Container(
                              height: XfgSize().size30,
                              width: width,
                              alignment: Alignment.center,
                              decoration: select ?
                              BoxDecoration(color: XfgColor.theme, borderRadius: BorderRadius.circular(XfgSize().size30))
                                  :
                              BoxDecoration(border: Border.all(color: XfgColor.text3, width: XfgSize().size0_5), borderRadius: BorderRadius.circular(XfgSize().size30)),
                              child: XfgText(label, color: select ? XfgColor.white:XfgColor.text2, fontSize: XfgSize().text14),
                            ),
                          );
                        }).toList(),
                      );
                    }),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: XfgSize().size8),
                    height: XfgSize().size90,
                    child: TextField(
                      controller: appraise.controller,
                      focusNode: appraise.focusNode,
                      maxLines: 999,
                      keyboardType: TextInputType.text,
                      style: TextStyle(fontSize: XfgSize().text14, color: XfgColor.text1, fontWeight: FontWeight.bold, height: Platform.isIOS?1:null),
                      decoration: InputDecoration(
                        isCollapsed: true,
                        isDense: true,
                        border: InputBorder.none,
                        contentPadding: EdgeInsets.zero,
                        hintText: '请评价',
                        hintStyle: TextStyle(fontSize: XfgSize().text14, color: XfgColor.text3, height: Platform.isIOS?1:null),
                      ),
                    ),
                  )
                ],
              ),
            ),
            SizedBox(height: XfgSize().size10),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: XfgSize().size10),
              child: XfgText('写满', fontSize: XfgSize().text14, color: XfgColor.text3, children: const [
                TextSpan(text: '20', style: TextStyle(color: XfgColor.theme)),
                TextSpan(text: '字，评论有机会被精选')
              ]),
            ),
            /// 评价图片
            Container(
              margin: EdgeInsets.fromLTRB(XfgSize().size10, XfgSize().size15, XfgSize().size10, XfgSize().size20),
              height: XfgSize().size82,
              child: Builder(builder: (ctx) {
                final photos = ctx.select<AppraiseViewmodel, List<AddPhoto>>((k) => k.photos);
                return ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: photos.length,
                  itemBuilder: (_, index) {
                    final photo = photos[index];
                    return Container(
                      margin: EdgeInsets.only(left: index == 0 ? 0:XfgSize().size5),
                      width: XfgSize().size82,
                      height: XfgSize().size82,
                      child: Stack(
                        children: [
                          Align(
                            alignment: Alignment.bottomLeft,
                            child: GestureDetector(
                              onTap: photo.isAdd ? appraise.addPhoto:null,
                              child: OvalImage(photo.file.path, size: Size.square(XfgSize().size77), radius: BorderRadius.circular(XfgSize().size6)),
                            ),
                          ),
                          Align(
                            alignment: Alignment.topRight,
                            child: Visibility(
                              visible: !photo.isAdd,
                              child: GestureDetector(
                                onTap: () => appraise.deletePhoto(index),
                                child: Image.asset(Res.imagesAppraisePhotoDelete, width: XfgSize().size14, height: XfgSize().size14),
                              ),
                            ),
                          )
                        ],
                      ),
                    );
                  }
                );
              }),
            ),
            /// 是否公开
            Padding(
              padding: EdgeInsets.symmetric(horizontal: XfgSize().size10),
              child: Row(
                children: [
                  Builder(builder: (ctx) {
                    final isPrivate = ctx.select<AppraiseViewmodel, int?>((k) => k.isPrivate);
                    return InkWell(
                      onTap: () => (appraise.isPrivate = isPrivate == 1 ? 0:1),
                      child: SizedBox(
                        width: XfgSize().size100,
                        child: Row(
                          children: [
                            xfgRadio(value: isPrivate == 0, size: XfgSize().size18),
                            SizedBox(width: XfgSize().size10),
                            XfgText('公开', fontSize: XfgSize().text14, color: XfgColor.text2)
                          ],
                        ),
                      ),
                    );
                  }),
                  Expanded(child: XfgText('公开图像昵称，大家可以看到我的主页', fontSize: XfgSize().text14, color: XfgColor.text3))
                ],
              ),
            ),
            const Spacer(),
            TextButton(
              onPressed: appraise.publish,
              style: xfgButtonStyle(Size(XfgSize().size342, XfgSize().size50), radius: XfgSize().size50),
              child: XfgText('发布', fontSize: XfgSize().text20, color: XfgColor.white, bold: FontWeight.bold),
            ),
            SizedBox(height: XfgSize().size20 + ( XfgSize().bottomBarHeight == 0 ? XfgSize().size30:XfgSize().bottomBarHeight))
          ],
        ),
      )
    );
  }

}
